const path = require('path')
const MiniCssExtracPlugin = require('mini-css-extract-plugin')//引入mnin-css-extract-plugin 抽离css
const HtmlWebpckPlugin = require("html-webpack-plugin");//引入html-webpack-pugin 注入html
const config = {
    //编译模式development开发模式producyion线上模式
    mode: 'production',
    //入口文件
    entry: "./src/index.js",
    //出口文件路径文件名
    output: {
        path: path.resolve(__dirname, 'dist'),//打包后目录 path.resovlve拼接路径——dirn
        clean: true,//静态资源模块管理name：文件名ext：文件类型hash:根据文件夹内容生成随机值
        //静态资源模块管理  name:文件名  ext:文件类型  baidu-ad9fadf0asduf9asdufa.png
        assetModuleFilename: "imgs/[name]-[hash][ext]",
    },
    //loader配置
    module: {
        rules: [
            { test: /\.css$/, use: [MiniCssExtracPlugin.loader, 'css-loader'] },
            { test: /\.s[ac]ss$/, use: [MiniCssExtracPlugin.loader, 'css-loader', 'sass-loader'] },
            { test: /\.(jpg|png|gif|svg)$/, type: "asset/resource" }
        ]
    },
    plugins: [
        new MiniCssExtracPlugin({
            filename: 'css/index.css'
        }),
        new HtmlWebpckPlugin({
            //指定模板源
      template: "./public/index.html",
      //html输出的文件名
      filename: "index.html",
      minify: false,
        }),
    ],
    //配置webpack Server
  devServer: {
    //webpack server在内存中运行，与本地打包的dist无实际关联
    //指定运行目录
    static: "./dist",
    //指定运行端口号
    port: 8888,
  },
}
module.exports = config